<template>
  <div class="set-up">
    <div class="head">
      <van-nav-bar title="账户管理" left-arrow @click-left="onClickLeft" />
    </div>

    <main>
      <div class="photo">
        <van-cell is-link title="头像" @click="show = true" />
        <van-action-sheet
          v-model="show"
          :actions="action"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
        />
        <p>
          <img src="../assets/img/cat2.jpg" alt="" />
        </p>
      </div>
      <a href="#" class="name">
        <h2>昵称</h2>
        <p>{{ udata.userphone }}</p>
        <van-icon name="arrow" />
      </a>

      <a href="#" class="user">
        <h2>用户名</h2>
        <p>{{ udata.name }}</p>
        <van-icon name="arrow" />
      </a>

      <div class="sex">
        <van-cell is-link title="性别" @click="SHOW = true" />
        <p>{{ udata.gender }}</p>
        <van-icon name="arrow" />
        <van-action-sheet
          v-model="SHOW"
          :actions="sex"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
          @select="onselect"
        />
      </div>

      <div class="brithday">
        <van-cell @click="showPopup">
          <h2>爱宠生日</h2>
          <p>{{ udata.date }}</p>
        </van-cell>
        <van-icon name="arrow" />
        <van-popup v-model="Show">
          <van-datetime-picker
            v-model="currentDate"
            confirm-button-text
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm"
            @cancel="cancel"
          />
        </van-popup>
      </div>

      <div class="bar"></div>
      <div class="address">
        <router-link to="/address"
          ><van-cell title="地址管理" is-link to="/setup"
        /></router-link>
      </div>

      <div class="safe">
        <router-link to="/safe"
          ><van-cell title="安全管理" is-link to="/setup"
        /></router-link>
      </div>

      <div class="footer">
        <van-button
          @click="motel"
          color="linear-gradient(to right,    #ff6034, #ee0a24)"
        >
          退出登录
        </van-button>

        <van-dialog
          v-model="button"
          title="确认退出"
          show-cancel-button
          @confirm="onconfirm"
          @cancel="oncancel"
        >
        </van-dialog>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      button: false,
      show: false,
      SHOW: false,
      Show: false,
      action: [{ name: "拍照" }, { name: "本地相册" }],
      sex: [{ name: "男" }, { name: "女" }],
      minDate: new Date(1700, 0, 1),
      maxDate: new Date(2100, 10, 1),
      currentDate: new Date(2021, 0, 17),
      udata: "",
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onCancel() {
      console.log(1);
    },
    showPopup() {
      this.Show = true;
    },
    motel() {
      this.button = true;
    },
    onselect(sex) {
      //    this.$store.commit('initMut',sex)
    },

    confirm(value) {
      console.log(value);
      this.Show = false;
    },
    cancel() {
      this.Show = false;
    },

    onconfirm() {
      window.localStorage.clear();
      this.$router.push("/");
      window.location.reload();
    },

    oncancel() {
      setTimeout(() => {
        location.reload();
      }, 1000);
    },
  },

  created() {
    let List = JSON.parse(localStorage.getItem("userInfo"));
    this.udata = List.userInfo;
    console.log(this.udata);
  },
};
</script>

<style src="../assets/css/set-up.css" scoped>
</style>